package myJs.cps.project

import myJs.api.Api
import myJs.cps.Style
import myJs.myPkg.highcharts._
import myJs.myPkg.reactBootstrap.{OverlayTrigger, Popover}
import myJs.tool.Tool
import shared.tsPojo.TsPojo
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks.{useEffect, useState}
import slinky.core.facade.ReactElement
import slinky.web.html._

import scala.scalajs.js
import org.scalajs.macrotaskexecutor.MacrotaskExecutor.Implicits._

/**
 * Created by yz on 21/1/2022
 */
@react object BoxplotCp {

  case class Props(geneName: String, kind: String, showLoading: Boolean = true)

  val component = FunctionalComponent[Props] { props =>

    val finalKind = props.kind match {
      case x => x
    }
    val (imgSrc, setImgSrc) = useState("")

    useEffect(() => {
      FTool.refreshImg
    }, List(props.geneName, props.kind)
    )

    object FTool {

      def refreshImg = {
        import TsPojo.browseGene._
        println(props.showLoading)
        Tool.useLoadingF(showLoading = props.showLoading) { () =>
          val request = BoxplotData.Request(geneName = props.geneName, phenotype = finalKind)
          Api.browseGene.boxplotData(request).map { response =>
            val boxs = response.map { x =>
              val custom = js.Dictionary("freq" -> x.freq, "cell" -> x.cell.toString)
              BoxData(
                low = x.min.toDouble,
                q1 = x.q25.toDouble,
                median = x.med.toDouble,
                q3 = x.q75.toDouble,
                high = x.max.toDouble,
                custom = custom
              )
            }
            val categories = response.map { x =>
              x.cellType
            }
            val options = HighchartsOptions(
              chart = Chart(
                `type` = "boxplot"
              ),
              title = Title(
                text = ""
              ),
              legend = Legend(
                enabled = false
              ),
              xAxis = XAxis(
                categories = categories,
                title = Title(
                  text = ""
                ),
                labels = Labels(
                  style = HCStyle(
                    fontSize = "12px",
                  )
                ),
                lineWidth = 1
              ),
              yAxis = YAxis(
                title = Title(
                  text = s"${props.geneName} Expr."
                ),
                labels = Labels(
                  style = HCStyle(
                    fontSize = "12px",
                  )
                ),
                lineWidth = 1
              ),
              labels = Labels(
                style = HCStyle(
                  fontSize = "16px",
                  color = "black",
                  fontWeight = "normal",
                )
              ),
              tooltip = Tooltip(
                pointFormat = s"Median:{point.median}<br>Quantile 25%:{point.q1}<br>Quantile 75%:{point.q3}<br>Num. of Expressed cells: {point.custom.cell}<br>Freq:{point.custom.freq}"
              ),
              series = List(
                Boxplot(
                  data = boxs,
                  tooltip = Tooltip(
                    headerFormat = "<b>{point.key}</b><br/>"
                  ),
                ),
                Scatter(
                  name = "Outlier",
                  color = Highcharts.getOptions().colors(0),
                  marker = Marker(
                    fillColor = "white",
                    lineWidth = 1,
                    lineColor = Highcharts.getOptions().colors(0)
                  ),
                )
              ),
              credits = Credits(enabled = false),
              plotOptions = PlotOptions(
                boxplot = BoxplotOption(
                  fillColor = "#F0F0E0",
                  lineWidth = 2,
                  medianColor = "#0C5DA5",
                  medianWidth = 3,
                  stemColor = "#A63400",
                  stemDashStyle = "dot",
                  stemWidth = 1,
                  whiskerColor = "#3D9200",
                  whiskerLength = "20%",
                  whiskerWidth = 3
                )
              )
            )
            Highcharts.chart("boxplotSvg", options = options)
          }
        }
      }

    }

    div(
      h5(style := Style(marginBottom = 10, fontSize = 16, marginTop = 15), id := "dot",
        "Box Plot ",
        {
          val popover: ReactElement = Popover(id = "popover-basic")(
            Popover.Title("Note"),
            Popover.Content(
              "Box plot showing the expression level and percentage of cells expressing the given gene in various cell types"
            )
          )
          OverlayTrigger(
            placement = "right",
            trigger = js.Array("focus", "hover"),
            overlay = popover
          )(
            span(
              a(`type` := "button",
                i(className := "fas fa-info-circle")
              )
            )
          )
        }
      ),
      div(className := "mySvg", id := "boxplotSvg")
    )


  }

  object STool {

  }

}
